<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp"%>
<script type="text/javascript" src="swfupload/swfupload.js">
</script>
<script type="text/javascript" src="swfupload/swfupload.queue.js">
</script>

<script type="text/javascript">
var albumId = $("#upload_photo_album_select").val();
var swfu;
$(function(){
	var settings = {
		flash_url : "swfupload/swfupload.swf",
		flash9_url : "swfupload/swfupload_fp9.swf",
		upload_url : "<%=basePath%>uploadPhotoSave.htm;jsessionid=<%=session.getId()%>",
		post_params : {
			"album" : albumId
		},
		file_size_limit : "2 MB",
		file_types : "*.jpg;*.bmp;*.gif",
		file_types_description : "Images",
		file_upload_limit : 10,
		file_queue_limit : 10,
		
		
		
		debug : false,

		// Button settings
		button_image_url : "images/home_images/xz.gif",
		button_width : "100",
		button_height : "24",
		button_placeholder_id : "uploadPhotoFile",
		button_text : '<span class="theFont">选择文件</span>',
		button_text_style : ".theFont{font-size: 14;color:#5a5859;font-weight: bold;}",
		button_text_left_padding : 16,
		button_text_top_padding : 1,

		// The event handler functions are defined in handlers.js
	//	swfupload_loaded_handler : function(){},// 当Flash控件成功加载后触发的事件处理函数
	//	file_dialog_start_handler : function(){},// 当文件选取对话框弹出前出发的事件处理函数
	//	swfupload_preload_handler : preLoad,
	//	swfupload_load_failed_handler : loadFailed,
		
		file_queued_handler : onFileQueued,//当文件选择对话框关闭消失时,如果选择的文件成功加入上传队列，那么针对每个成功加入的文件都会触发一次该事件（N个文件成功加入队列，就触发N次此事件）。
		file_queue_error_handler : onFileError,
		//fileDialogComplete会自动上传文件,这里不调用系统的方法
		//当选择文件对话框关闭，并且所有选择文件已经处理完成（加入上传队列成功或者失败）时，
		//此事件被触发，number of files selected是选择的文件数目，number of files queued是此次选择的文件中成功加入队列的文件数目。
	//	file_dialog_complete_handler : fileDialogComplete,
	
	/**
	 * 在文件往服务端上传之前触发此事件，可以在这里完成上传前的最后验证以及其他你需要的操作，例如添加、修改、删除post数据等。
	 * */
	//	upload_start_handler : uploadStart, 
		//该事件由flash定时触发，提供三个参数分别访问上传文件对象、已上传的字节数，总共的字节数。因此可以在这个事件中来定时更新页面中的UI元素，以达到及时显示上传进度的效果。
		upload_progress_handler : onUploadProgress,
		//无论什么时候，只要上传被终止或者没有成功完成，那么该事件都将被触发。
	//	upload_error_handler : uploadError,
		//当文件上传的处理已经完成（这里的完成只是指向目标处理程序发送了Files信息，只管发，不管是否成功接收），并且服务端返回了200的HTTP状态时，触发此事件
	//	upload_success_handler : uploadPhotoSuccess,
		//当上传队列中的一个文件完成了一个上传周期，无论是成功(uoloadSuccess触发)还是失败(uploadError触发)，此事件都会被触发，这也标志着一个文件的上传完成，可以进行下一个文件的上传了。
		upload_complete_handler : onUploadComplete,
		queue_complete_handler : uploadPhotoSuccess
	// Queue plugin event
	};

	swfu = new SWFUpload(settings);
	
	$("#uploadPhotoButton").click(function(){
		swfu.addPostParam("album",$("#upload_photo_album_select").val());
		swfu.startUpload();
	});
	
	$("#upload_photo_add_album_button").click(function() {
		$("#upload_photo_add_album").load("albumAdd.htm");
		$("#upload_photo_add_album").show();
	});
});

function uploadPhotoSuccess(){
	
	$("#content_detail").load("photoPage.htm?album="+$("#upload_photo_album_select").val(),function(){
		operateTip("photo_upload_tip_success");		
	});
}

function onFileQueued(file){
	var fileSize =Math.floor( file.size / 1024 );
	
	var liItem = '<li id="file_'+file.id+'"><span class="uploadImg_name">'+file.name+'</span><span class="uploadImg_size">'+fileSize+'&nbsp;KB</span>';
	liItem+='<span class="uploadImg_delete"><a href="javascript:void(0);" onclick=\'delUploadFile("'+file.id+'")\'>删除</a> </span>';
	liItem+='</li>';
	$("#uploadImgBox").append(liItem);
	var currentFileNum = $("#upload_photo_file_num").text();
	$("#upload_photo_file_num").text(parseInt(currentFileNum)+1);
}

function delUploadFile(fileId){
	//删除要上传的文件
	swfu.cancelUpload(fileId);
	$("#file_"+fileId).remove();
	var currentFileNum = $("#upload_photo_file_num").text();
	$("#upload_photo_file_num").text(parseInt(currentFileNum)-1);
}

function onFileError(file,n){
	switch(n){
		case -100 : alert('一次最多只能上传10张照片！');
		break;
		case -110 : alert('文件大小不能超过2MB！');
		break;
		case -120 : alert('该文件大小不能为0！');
		break;
		case -130 : alert('该文件类型不可以上传！');
		break;
	}
}

function onUploadProgress(file, bytesLoaded, bytesTotal){
	try {
		var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);

		$("#file_"+file.id).find(".uploadImg_size").text("已上传"+percent+"%");
	} catch (ex) {
		this.debug(ex);
	}
}

function onUploadComplete(file) {
	$("#file_"+file.id).find(".uploadImg_size").text("已上传100%");
	$("#file_"+file.id).find(".uploadImg_delete").text("已完成");
}

</script>
<div class="h_newNews_box">
	<div class="h_newNews_text" id="con_newNews_1" style="display: block;">
		<div class="photosUpload_box">
			<div class="selectUpload">
				<form id="uploadPhotoForm" action="uploadPhotoSave.htm"
					method="post" enctype="multipart/form-data">
					<div style="float: left; height: 30px;">
						选择照片专辑：
						<select name="album" id="upload_photo_album_select">
							<c:forEach items="${albumList}" var="album">
								<option value="${album.identifier}"
									<c:if test="${album.identifier==albumId}">
								SELECTED
							</c:if>>
									<c:out value="${album.name}"></c:out>
								</option>
							</c:forEach>

						</select>
					</div>
					<div style="float: left;">
						<a href="javascript:void(0);" id="upload_photo_add_album_button">创建专辑</a>
					</div>
					<div style="float: left; height: 30px; margin-left: 10px;">
						<span id="uploadPhotoFile"></span>
					</div>
				</form>
			</div>
			<div class="uploadImg">
				<div class="uploadImg_input">

				</div>
				<div class="uploadImg_box">
					<ul id="uploadImgBox">

					</ul>
					<div class="uploadImg_f" >
						<span id="upload_photo_file_num">0</span> 个文件上传
						<!--
							<a href="javascript:void(0);" onclick="uploadPhotoClear()">清空列表</a>
							 -->
					</div>
				</div>
				<div class="clear"></div>
				<div class="h_button w75 mt15" id="uploadPhotoButton"
					style="margin-left: 10px;">
					<strong>上传照片</strong>
				</div>
			</div>
		</div>

	</div>
	<div class="h_newNews_text" id="con_newNews_2">
		fdsfsdf
	</div>
	
</div>
<div id="upload_photo_add_album" style="display: none;"></div>

